<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Guides - Example</title>
	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript" src="javascripts/mGuidesUI.js"></script>
	<link type="text/css" href="css/demos.css" rel="stylesheet" />
	<script type="text/javascript">
  	$(function() {

  		$(".draggable").draggable({guides: true, guidepadding: 20, guideinner: '.demo'}).resizable({handles: 'n, e, s, w', guides: true, guidepadding: 20, guideinner: '.demo'});
  	});
	</script>
</head>
<body>
<div class="demo">

<div id="draggable_1" class="ui-widget-content draggable">
	<p>Drag me around or resize me</p>
</div>

<div id="draggable_2" class="ui-widget-content draggable" style="width:200px;height:200px;">
	<p>Drag me around or resize me</p>
</div>

<div id="draggable_3" class="ui-widget-content draggable">
	<p>Drag me around or resize me</p>
</div>

<div id="draggable_4" class="ui-widget-content draggable" style="width:100px;height:100px;">
	<p>Drag me around or resize me</p>
</div>

<div class="demo-description">

<p>
Enable guides on any jQueryUI draggable or resizable element.
</p>

</div><!-- End demo-description -->

</div><!-- End demo -->


</body>
</html>